<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{margin: 0;padding: 0;}
        ul,li{list-style: none;margin: 0;padding: 0}

        .list{width: 100%;height: 40px;line-height: 40px;background: #ccc;display: flex;text-align: center}
        .list>li{flex: 1;border-left: solid 1px black;border-right: solid 1px black;}
        .list>li>ul{background: #eee;display: none}
        .list>li>ul>li{border: solid 1px #fff;position: relative;}
        .list ul ul{position: absolute;width: 200px;background: #efefef;right:-200px;display: none;top:0;}
    </style>
    <script src="../jquery.js"></script>
    <script>
        window.onload = function(){
            // 控制二级菜单
            // $(".list").children("li").mouseover(function(){
            //     // console.log(this)
            //     $(this).children("ul").stop().slideDown(3000)
            // }).mouseout(function(){
            //     $(this).children("ul").stop().slideUp(3000)
            // })
            
            // 控制三级菜单
            // $(".list").children("li").children("ul").children("li").mouseover(function(){
            //     $(this).children("ul").stop().fadeIn()
            // }).mouseout(function(){
            //     $(this).children("ul").stop().fadeOut()
            // })

            // 二级+三级
            $(".list").find("li").mouseover(function(){
                // console.log(this)
                $(this).children("ul").stop().slideDown(3000)
            }).mouseout(function(){
                $(this).children("ul").stop().slideUp(3000)
            })
        }
    </script>
</head>
<body>
    <ul class="list">
        <li>
            <span>一级菜单</span>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span>一级菜单</span>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span>一级菜单</span>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <span>一级菜单</span>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>二级菜单</span>
                    <ul>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
<script>
    
</script>
</html>